<template>
  <div class="app-container">

    <el-table :data="tableData" class="data_table" style="width: 100%">
      <el-table-column prop="name" label="求购商家" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.store.storeName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="商家地址" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.store.location }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goods" label="求购物品" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.goodName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodtype" label="商品品牌" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.goodType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodspec" label="规格型号" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.spec }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="求购数量" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.goodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="求购价格" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="截至日期" width="250">
        <template slot-scope="{ row }">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="row.end_time"
            readonly
          />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.orderState }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="Actions"
        align="center"
        width="120"
        class-name="seeMore"
      >
        <template slot-scope="{ row }">
          <el-button class="filter-item" type="primary" @click="seeMore(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="120" class-name="seeBaojia">
        <template slot-scope="{row}">
          <el-button v-if="row.orderState != 'ORDER_SUCCESS'" class="filter-item" type="primary" @click="seeBaojia(row)">
            查看报价
          </el-button>
          <el-button v-else class="filter-item" type="primary" @click="seeSuccessBaojia(row)">
            成交报价单
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="120" class-name="seeBaojia">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" :disabled="row.orderState == 'ORDER_DISPLAY'" @click="deleteOrder(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看详情界面-->
    <el-dialog :title="textMap.see" :visible.sync="seeMoreVisible">
      <el-form
        ref="dataFormsee"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="求购店面" prop="shopName">
          <el-input v-model="temp.storeName" readonly />
        </el-form-item>
        <el-form-item label="店面地址" prop="shopLocation">
          <el-input v-model="temp.storeLocation" readonly />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodId">
          <el-input v-model="temp.goodId" readonly />
        </el-form-item>
        <el-form-item label="求购商品" prop="goodName">
          <el-input v-model="temp.goodName" readonly />
        </el-form-item>
        <el-form-item label="商品类型" prop="goodType">
          <el-input v-model="temp.goodType" readonly />
        </el-form-item>
        <el-form-item label="商品规格" prop="spec">
          <el-input v-model="temp.spec" readonly />
        </el-form-item>
        <el-form-item label="商品数量" prop="goodNumber">
          <el-input v-model="temp.goodNumber" readonly />
        </el-form-item>
        <el-form-item label="期望价格" prop="price">
          <el-input v-model="temp.price" readonly />
        </el-form-item>
        <el-form-item label="截至日期" prop="date">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="temp.end_time"
            readonly
          />
        </el-form-item>
        <el-form-item label="状态" prop="price">
          <el-input v-model="temp.orderState" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="seeMoreVisible = false"> 返回 </el-button>
      </div>
    </el-dialog>

    <!--查看成交报价单界面-->
    <el-dialog title="成交报价单详情" :visible.sync="seeSuccessOfferVisible">
      <el-form
        ref="dataFormsee"
        :model="successOffer"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="报价店面" prop="shopName">
          <el-input v-model="successOffer.store.storeName" readonly />
        </el-form-item>
        <el-form-item label="店面地址" prop="shopLocation">
          <el-input v-model="successOffer.store.location" readonly />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodId">
          <el-input v-model="successOffer.good.goodId" readonly />
        </el-form-item>
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="successOffer.good.goodName" readonly />
        </el-form-item>
        <el-form-item label="商品类型" prop="goodType">
          <el-input v-model="successOffer.good.goodType" readonly />
        </el-form-item>
        <el-form-item label="商品规格" prop="spec">
          <el-input v-model="successOffer.good.spec" readonly />
        </el-form-item>
        <el-form-item label="商品保质期至" prop="date">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="successOffer.good.validDate"
            readonly
          />
        </el-form-item>
        <el-form-item label="商品数量" prop="goodNumber">
          <el-input v-model="successOffer.goodNumber" readonly />
        </el-form-item>
        <el-form-item label="出价(单价)" prop="price">
          <el-input v-model="successOffer.price" readonly />
        </el-form-item>
        <el-form-item label="截至日期" prop="date">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="successOffer.end_time"
            readonly
          />
        </el-form-item>
        <el-form-item label="状态" prop="price">
          <el-input v-model="successOffer.quotationState" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="seeSuccessOfferVisible = false"> 返回 </el-button>
      </div>
    </el-dialog>

    <!--查看报价单界面-->
    <el-dialog :title="textMap.buy" :visible.sync="seeBaoJiaVisible" width="75%">

      <div class="filter-container">
        <el-select v-model="strategy" placeholder="策略" clearable class="filter-item" style="width: 130px">
          <el-option v-for="item in strategyList" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
        <el-button class="filter-item" type="primary" :loading="loading" icon="el-icon-search" @click="handleStrategy">
          Search
        </el-button>
      </div>

      <el-table :data="buyData" class="data_table" style="width: 100%;">
        <el-table-column prop="option" label="" width="50">
          <template slot-scope="{row}">
            <input v-model="selectRow" type="radio" :value="row">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="报价商家" width="100">
          <template slot-scope="{row}">
            <span>{{ row.store.storeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="商家地址" width="100">
          <template slot-scope="{row}">
            <span>{{ row.store.location }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodId" label="商品编号" width="100">
          <template slot-scope="{row}">
            <span>{{ row.good.goodId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goods" label="供给物品" width="100">
          <template slot-scope="{row}">
            <span>{{ row.good.goodName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodtype" label="商品品牌" width="100">
          <template slot-scope="{row}">
            <span>{{ row.good.goodType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodspec" label="商品规格" width="100">
          <template slot-scope="{row}">
            <span>{{ row.good.spec }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="validDate" label="商品保质期" width="250">
          <template slot-scope="{row}">
            <el-date-picker ref="date" type="datetime" v-model="row.good.validDate" readonly />
          </template>
        </el-table-column>
        <el-table-column prop="num" label="供给数量" width="80">
          <template slot-scope="{row}">
            <span>{{ row.goodNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80">
          <template slot-scope="{row}">
            <span>{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="截止时间" width="250">
          <template slot-scope="{row}">
            <el-date-picker ref="date" type="datetime" v-model="row.end_time" readonly />
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="200">
          <template slot-scope="{row}">
            <span>{{ row.quotationState }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="handleDeal">
          确认成交
        </el-button>

        <el-button @click="seeBaoJiaVisible = false">
          返回
        </el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import waves from '@/directive/waves' // waves directive
import { number } from 'echarts/lib/export'
import request from '@/utils/request'

export default {
  name: 'MyTobuy',
  directives: { waves },
  data() {
    return {
      storeNumber: null,
      userName: "",
      storeId: '',
      storeName: '',
      storeLocation: '',
      tableData: [],
      buyData: [],
      orderId: 0,
      loading: false,
      strategy: '策略',
      strategyList: [
        // {
        //   name: '最短时间',
        //   key: 2
        // },
        {
          name: '最短距离',
          key: 1
        },
        {
          name: '最低价格',
          key: 0
        },
        {
          name: '有效期',
          key: 2
        },
        {
          name: '品牌一致',
          key: 3
        },
        {
          name: '符合预期价格',
          key: 4
        }
      ],
      selectRow: {},
      temp: {
        orderId: "",
        orderState:"",
        storeName: "",
        storeLocation: "",
        goodId: "",
        goodName: "",
        goodType: "",
        goodNumber: null,
        spec: "",
        price: 0,
        end_time: "",
      },
      successOffer: {
        quotationState: null,
        store: {
          storeName: null,
          location: null,
        }, 
        good: {
          goodName: null,
          goodType: null,
          spec: null,
          validDate: null,
        },
        price: null,
        goodNumber: null,
        end_time: null,
      },
      seeSuccessOfferVisible: false,
      seeMoreVisible: false,
      seeBaoJiaVisible: false,
      textMap: {
        see: '求购单详情',
        buy: '报价单'
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // console.log('初始化')
      this.storeNumber = JSON.parse(sessionStorage.getItem('store')).storeNumber
      this.storeName = JSON.parse(sessionStorage.getItem('store')).storeName
      this.storeLocation = JSON.parse(sessionStorage.getItem('store')).location
      this.userName = JSON.parse(sessionStorage.getItem("login_name"))

      request.get('/orderService/getStoreBuyOrder/' + this.storeNumber + "/" + this.userName).then(request=>{
        var resdata=request.data
        this.tableData = resdata.data
        // alert('OK')
      }).catch((err)=>{
        console.log(err)
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    },
    seeMore(row) {
      this.temp.storeName = row.store.storeName;
      this.temp.storeLocation = row.store.location;
      this.temp.goodId = row.good.goodId;
      this.temp.goodName = row.good.goodName;
      this.temp.goodNumber = row.goodNumber;
      this.temp.goodType = row.good.goodType;
      this.temp.spec = row.good.spec;
      this.temp.end_time = row.end_time;
      this.temp.price = row.price;
      this.temp.orderId = row.orderId;
      this.temp.orderState = row.orderState

      this.seeMoreVisible = true
    },
    seeBaojia(row) {
      request.get('/quotationService/getQuotionByOrderIdInTime/' + row.orderId).then(request=>{
        var resdata=request.data
        // console.log(resdata)
        // return
        this.orderId = row.orderId
        this.buyData = resdata.data
        this.seeBaoJiaVisible = true
      }).catch((err)=>{
        console.log(err)
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    },
    seeSuccessBaojia(row) {
      // 查看成交的报价单
      request.get('/orderService/getSuccessOrder/' + row.orderId).then(request=>{
        var resdata=request.data
        this.successOffer = resdata.quotation
        this.seeSuccessOfferVisible = true
      }).catch((err)=>{
        console.log(err)
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    },
    deleteOrder(row) {
      // 删除订单 只能删除 超时得或者是成功得，正在展示得无法删删除
      request.delete('/orderService/delete/'+row.orderId).then(request =>{
        var Data = request.data
        if(Data.code == 200){
          this.$message.success(Data.message)
          this.init()
        } else {
          this.$message.error(Data.message)
        }
      }).catch((err)=>{
        console.log(err)
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    },
    handleStrategy() {
      // alert('当前策略的id为' + this.strategy + ',当前的订单id为' + this.orderId)
      if(this.strategy == null||this.strategy == '策略'||this.strategy.length<1) {
        this.$message.warning('请选择策略！')
        return
      }
      this.loading = true
      request.get('/quotationService/getQuotionByOrderIdAndCe?' +
       'id=' + this.orderId + "&strategy=" + this.strategy).then(request=>{
        var resdata=request.data
        // console.log(resdata)
        // return
        this.loading = false
        this.$message.success('获取数据成功！')
        this.buyData = resdata.data
      }).catch((err)=>{
        console.log(err)
        this.loading = false
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    },
    handleDeal() {
      // console.log(this.selectRow)
      // return
      const quotationId = this.selectRow.quotationId
      const state = this.selectRow.quotationState
      if (quotationId === undefined) {
        this.$message.warning('请选择要成交的报价单')
        return
      }
      else if(state!='QUOTATION_DISPLAY') {
        this.$message.warning('当前选择的报价单已失效，请重新选择！')
        return
      }
      request.put('/orderService/successOrder/' + this.orderId + "/" 
            + quotationId).then(response => {
        var Data = response.data
        if (Data.code == 200){
          // 订单状态更改完成
          this.$message.success('交易成功！')
          this.seeBaoJiaVisible = false
          this.init()
        } else {
          this.$message.error(Data.message)
        }
      }).catch((err)=>{
        console.log(err)
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    }
  }
}
</script>

<style scoped>

</style>
